<template>
  <div class="article-list">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">

        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          offset="200"
          loading-text="拼命加载中..."
        >
          <van-cell v-for="(item,index) in list" :key="index" :title="item.title" />
        </van-list>
  
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  
  props: ["channelID"],
  data() {
    return {
      list: [], // 列表数据
      loading: false, // 加载中
      finished: false, // 停止加载
      curr: 1,
      limit: 10,
      refreshing: false, // 是否下拉刷新
    };
  },
  created() {
    console.log(this.channelID);
  },
  methods: {
    //   加载数据事件：当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true。
    onLoad() {
      console.log("上拉");

      // 如果下拉刷新为true,清空数据
      if (this.refreshing) {
        this.list = [];
        this.refreshing = false;
      }

      // ajax请求文章列表数据
      setTimeout(() => {
        this.$axios
          .get("https://haodaima.com/article/list", {
            params: { curr: this.curr, limit: this.limit },
          })
          .then((r) => {
            // console.log(r.data.listData);
            this.list.push(...r.data.listData);
            this.curr++;
            // 加载状态结束
            this.loading = false;

            if (r.data.listData.length === 0) {
              // 上拉加载完后finished变为true,停止加载
              this.finished = true;
            }
          });
      }, 1000);
    },

    // 当我们下拉的时候，就会把this.refreshing自动设置为true
    onRefresh() {
      // 上拉加载完后finished变为true,下拉时就停止再加载了
      // 所以下拉时这里需重置为false
      this.finished = false;

      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;

      // 重新加载数据
      this.curr = 1;
      this.onLoad();
    },
  },
};
</script>

<style lang="scss" scoped>
.article-list {
  position: fixed;
  top: 220px;
  bottom: 80px;
  left: 0;
  right: 0;
  overflow-y: auto;
}
</style>